<template>
	<view>
		<scroll-view scroll-y="true" :style="{height:height+'px'}">
			<view class="group">
				<view class="goodsList" v-for="(item,index) in list">
					<view class="item2">
						<view class="item2Left" @click="choose(index)">
							<image class="icon" :class="{trun:item.choose,backTrun:!item.choose}" src="../../../static/img/icon_sanjiao.png"></image>
							<view class="title">{{item.name}}</view>
						</view>
						<view class="item2Right">
							<image class="share" src="../../../static/img/icon_share@3x.png"></image>
							<view class="shreText" @tap="shareFc(index)">分享</view>
						</view>
					</view>
					<view class="orderList" v-show="item.choose">
						<view class="itemBox" v-for="(items,idx) in item.goodList">
							<radio color="#FE5900" class="rido" :checked="items.checked" @click="putGoodslist(index,idx)"/>
							<view class="item">
								<view class="middle">
									<image :src="items.goodsImage[0]"></image>
									<view class="right">
										<view class="title">{{items.goodsName}}</view>
										<view class="bottom">
											<view class="priceBox">
												<view class="price">￥<text>{{items.price || 0}}</text></view>
											</view>
											<!-- <view class="share">
												<image src="../../../static/img/icon_share.png"></image>
												<view class="text">分享</view>
											</view> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="select">
					<label class="radio">
						<radio color="#FE5900" :checked="allCheck" @click="allCheckFun"/>全选</label>
						<button class="delete" @click="deleteGoods">删除</button>
				</view>
			</view>
		</scroll-view>
		<!-- 图片展示由自己实现 -->
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button class="flex_btn" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<button class="flex_btn" type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button>
				</view>
			</view>
		</view>
		<!-- 画布 -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import _app from '@/util/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/util/QS-SharePoster/QS-SharePoster.js';
	import {
		getGroupList,getGroupGoodsList,deleteGroupGoods
	} from '../../../api/order/index'
	export default {
		props: ["height"],
		data() {
			return {
				status: 'loading',
				loadText: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '加载中',
					nomore: '已经到底啦'
				},
				allCheck:false,
				poster: '',
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				list: []
				// list:[{name:'分组1',choose:false},{name:'分组2',choose:false},{name:'分组3',choose:false},{name:'分组4',choose:false},{name:'分组5',choose:false},{name:'分组6',choose:false},{name:'分组7',choose:false},{name:'分组8',choose:false}]
			}
		},
		created() {
			// this.myGetGroupList()
		},
		mounted() {
			this.myGetGroupList();
		},
		methods: {
			deleteGoods() {
				let chooseList = [];
				this.list.forEach(e=>{
					e.goodList.forEach(i=>{
						if(i.checked) {
							let parmas = {
								groupId:e.id,
								goodsIds:[]
							}
							parmas.goodsIds.push(i.id)
							chooseList.push(parmas)
						}
					})
				})
				try {
				    const token = uni.getStorageSync('token');
				    if (token) {
				        uni.request({
				            url: 'http://192.168.0.111:8088/front/user/share/group/delete/group/goods', //仅为示例，并非真实接口地址。
				            data: chooseList,
				        	method:"POST",
				            header: {
				                'custom-header': 'application/json',
				        		"token":token
				            },
				            success: (res) => {
				                console.log(res.data);
				        		this.utils.toast(res.data.msg,'success');
								this.list.forEach(e=>{
									e.choose = false;
									e.goodList = [];
								})
				            }
				        });
				    }
				} catch (e) {
					console.log(e)
				    // error
				}
			},
			allCheckFun() {
				this.allCheck == true ? this.allCheck = false : this.allCheck = true;
				if(this.allCheck) {
					this.list.forEach(e=>{
						e.goodList.forEach(i=>{
							i.checked = true;
						})
					})
				}else {
					this.list.forEach(e=>{
						e.goodList.forEach(i=>{
							i.checked = false
						})
					})
				}
			},
			putGoodslist(index,idx) {
				this.list[index].goodList[idx].checked == true ? this.list[index].goodList[idx].checked = false : this.list[index].goodList[idx].checked = true;
			},
			myGetGroupList() {
				getGroupList().then(res => {
					let list = res.data.obj
					list.forEach(e => {
						e.choose = false;
						e.name = e.groupName;
						e.goodList = [];
					})
					this.list = list;
				}).catch(err => {

				})
			},
			async shareFc(index) {
				var checkedList = [];
				var posterList = [];
				var posterHeight = 1334;
				var textBottom = 1220;
				var textBottom2 = 1290;
				this.list[index].goodList.forEach(i=>{
					if(i.checked) {
						checkedList.push(i);
					}
				})
				if(checkedList.length == 0) {
					this.utils.toast('请选中该组中的商品再进行分享')
				}else{
					if(checkedList.length > 5) {
						this.utils.toast('一次最多分享勾选的5个商品')
					}else{	
						posterList = await this.utilsShare(checkedList);
						console.log(posterList);
						if(checkedList.length == 1) {
							posterHeight = 550;
							textBottom = 450;
							textBottom2 = 500;
						}else if(checkedList.length == 2) {
							posterHeight = 750;
							textBottom = 650;
							textBottom2 = 700;
						}else if(checkedList.length == 3) {
							posterHeight = 950;
							textBottom = 850;
							textBottom2 = 900;
						}else if(checkedList.length == 4) {
							posterHeight = 1150;
							textBottom = 1050;
							textBottom2 = 1100;
						}else if(checkedList.length == 5) {
							posterHeight = 1350;
							textBottom = 1220;
							textBottom2 = 1290;
						}
						try {
							_app.log('准备生成:' + new Date())
							const d = await getSharePoster({
								_this: this, //若在组件中使用 必传
								type: 'testShareType',
								formData: {
									//访问接口获取背景图携带自定义数据
								},
								posterCanvasId: this.canvasId, //canvasId
								delayTimeScale: 20, //延时系数
								background: {
									width: 750,
									height: posterHeight,
									backgroundColor: '#FFFFFF'
								},
								drawArray: ({
									bgObj,
									type,
									bgScale
								}) => {
									const dx = 750 * 0.3;
									const fontSize = 750 * 0.045;
									const lineHeight = bgObj.height * 0.04;
									//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
									return new Promise((rs, rj) => {
										rs([
											...posterList,
											{
												type: 'qrcode',
												text: '你好，我是取舍',
												size: 750 * 0.3,
												dx: 30,
												dy: bgObj.height - 30 - 750 * 0.3
											},
											{
												type: 'image',
												url: 'https://gd3.alicdn.com/imgextra/i4/479184430/O1CN01nCpuLc1iaz4bcSN17_!!479184430.jpg_400x400.jpg',
												size: fontSize,
												dWidth: 750 * 0.2,
												dHeight: 750 * 0.2,
												dx: 560,
												dy: bgObj.height - 30 - 750 * 0.2
											},
											{
												type: 'text',
												text: '长按图片',
												size: 35,
												color: '#949494',
												alpha: 1,
												textAlign: 'left',
												textBaseline: 'middle',
												dx: 280,
												dy: textBottom,
											},
											{
												type: 'text',
												text: '识别二维码',
												size: 35,
												color: '#949494',
												alpha: 1,
												textAlign: 'left',
												textBaseline: 'middle',
												dx: 280,
												dy: textBottom2,
											},
										]);
									})
								},
								setCanvasWH: ({
									bgObj,
									type,
									bgScale
								}) => { // 为动态设置画布宽高的方法，
									this.poster = bgObj;
								}
							});
							_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
							this.poster.finalPath = d.poster.tempFilePath;
							this.qrShow = true;
						} catch (e) {
						_app.hideLoading();
						_app.showToast(JSON.stringify(e));
						console.log(JSON.stringify(e));
						}
					}
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif

				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			},
			async choose(index) {
				this.list[index].choose = !this.list[index].choose
				try {
					const ret = await getGroupGoodsList({groupId:this.list[index].id});
					var list = ret.data.obj;
					list.forEach(e=>{
						e.checked = false;
					})
					this.list[index].goodList = list;
				}catch(error){
					console.log(error)
				}
			},
			
			utilsShare(checkedList) {
				var fontSize = 750 * 0.045;
				let posterList = []
				for(let i = 0;checkedList.length > i ; i++) {					
					var imgObj = {
						type: 'image',
						// url: e.goodsImage[0],
						url:'https://gd3.alicdn.com/imgextra/i4/479184430/O1CN01nCpuLc1iaz4bcSN17_!!479184430.jpg_400x400.jpg',
						size: fontSize,
						dWidth: 200,
						dHeight: 200,
						dx: 30,
						dy: i*210 + 30
					};
					posterList.push(imgObj);
					var nameObj ={
						type: 'text',
						text: checkedList[i].goodsName,
						size: 35,
						color: 'black',
						alpha: 1,
						textAlign: 'left',
						textBaseline: 'middle',
						dx: 250,
						dy: i*210 + 60,
						lineFeed: {
							maxWidth: 750 - 290,
							lineHeight: 50,
							lineNum: 2
						}
					};
					posterList.push(nameObj);
					var priceObj = {
						type: 'text',
						text: checkedList[i].price,
						size: 35,
						color: 'black',
						alpha: 1,
						textAlign: 'left',
						textBaseline: 'middle',
						dx: 250,
						dy: i*210 + 200,
						lineFeed: {
							maxWidth: 750 - 290,
							lineHeight: 50,
							lineNum: 2
						}
					};
					posterList.push(priceObj);
					var giveObj ={
						type: 'text',
						text: '赠送',
						size: 35,
						color: '#7B8D31',
						alpha: 1,
						textAlign: 'left',
						textBaseline: 'middle',
						dx: 640,
						dy: i*215 + 205,
					};
					posterList.push(giveObj);
				}
				return posterList;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.backTrun {
		transition: all 0.2s linear;
		transform: rotate(0deg);
	}

	.trun {
		transition: all 0.2s linear;
		transform: rotate(90deg);
	}

	.group {
		padding-bottom: 130rpx;
		padding-top: 20rpx;

		.item2 {
			padding: 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F4F4F4;
			background: #FFFFFF;

			.item2Left {
				flex: auto;
				display: flex;
				align-items: center;
			}

			.item2Right {
				display: flex;
				align-items: center;
			}

			.icon {
				flex: none;
				width: 20rpx;
				height: 25rpx;
			}

			.title {
				margin: 0 20rpx;
				margin-left: 50rpx;
				flex: auto;
				font-size: 28rpx;
				font-weight: 400;
			}

			.share {
				width: 25rpx;
				height: 25rpx;
				margin-right: 10rpx;
			}

			.shareText {
				font-size: 25rpx;
				color: #949494;
			}
		}

		.select {
			height: 130rpx;
			box-shadow: 0 0 10rpx #E0E0E0;
			display: flex;
			padding: 0 30rpx;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 99;
			background: #FFFFFF;

			button {
				width: 140rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: #FE5900;
				color: #FFFFFF;
				border-radius: 100rpx;
				font-size: 24rpx;
				margin: 0;
			}
		}
	}

	.orderList {
		padding: 1rpx 20rpx;
		padding-bottom: 20rpx;

		.itemBox {
			display: flex;
			align-items: center;

			.rido {
				margin-right: 10rpx;
			}
		}

		.item {
			flex: auto;
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #FFFFFF;

			.top {
				.status {
					padding: 10rpx 30rpx;
					color: #FE5900;
					border: 1px solid #FE5900;
					border-radius: 100rpx;
				}

				font-size: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.middle {
				display: flex;
				
				align-items: flex-start;

				image {
					flex: none;
					width: 110rpx;
					height: 110rpx;
					margin-right: 20rpx;
				}

				.right {
					flex: auto;

					.title {
						font-size: 25rpx;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-right: 20rpx;
					}

					.content {
						display: flex;
						font-size: 25rpx;
						align-items: center;
						justify-content: space-between;
						margin-top: 10rpx;

						.spec {
							margin-top: 5rpx;
							color: #949494;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							margin-right: 20rpx;
							margin-right: 30rpx;
						}

						.num {
							color: #949494;
						}
					}
				}
			}
			.bottom {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				align-content: center;
				.priceBox {
					display: flex;
					align-items: center;
					image {
						height: 25rpx;
						width: 20rpx;
						margin-left: 30rpx;
					}
				
					.price {
						font-size: 20rpx;
						color: #FE5900;
				
						text {
							font-size: 30rpx;
						}
					}
				
					.zeng {
						color: #FE5900;
						margin-left: 6rpx;
					}
				}
				.btns {
					display: flex;
					align-items: center;

					view {
						margin-left: 30rpx;
						font-size: 26rpx;
						color: #949494;
					}
				}

				.share {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #949494;

					image {
						width: 25rpx;
						height: 25rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
	}

	.border_radius_10px {
		border-radius: 10px;
	}

	.padding1vh {
		padding: 1vh;
	}

	.posterImage {
		width: 65vw;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}

	.flex_btn {
		background: #FE5900;
		color: #FFFFFF;
	}
</style>
